const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// const EncodingPlugin = require('webpack-encoding-plugin')
const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: "development",
  entry: {
    index: './src/index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
    // publicPath: '/'
  },
  devtool: 'cheap-module-eval-source-map', // development
  // devtool: 'cheap-module-source-map', // development
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 监听代码变化自动提交并刷新网页
    open: true,
    port: 9000,
    hot: true, // 开启热更新
    hotOnly: true // 不需要重新刷新页面
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/html/index.html',
      filename: 'html/index.html', //指定生成的文件的名称，该文件存在于内存中，在目录中不显示
    }),
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      // 打包js,将es6转化为es5
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      // 打包图片
      {
        test: /\.(jpe?g|png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 4 * 1024, // 参考vue-cli配置,将小于4KB的资源内联。图片小于4KB时，转化为base64编码格式
            name: '[name].[ext]',
            outputPath: './image',
            publicPath: '../image/'
          }
        }
      },
      // 字体文件
      {
        test: /\.bmp|ttf|eot|svg|woff|woff2$/,
        use: 'url-loader?limit=49744'
      },
      // 打包css
      {
        test: /\.(css|s[ac]ss)$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
            modules: true // 使用模块化方式处理css，按照vue-cli文档应命名为style.module.scss
          }
        }, 'sass-loader', 'postcss-loader']
      },
      // 处理csv文件
      {
        test: /\.(csv|tsv)$/,
        use: {
          loader: 'csv-loader',
          options: {
            filename: 'files/[name].[ext]'
          }
        }
      }
    ]
  }
}